﻿/// <reference path="uicontrol.ts" />

module UI {

    export class Button extends UIControl {

        public type: string = 'Button';

        public text: string = '';

        public onClick: InputEvent = null;

        public onEnter: InputEvent = null;

        public onExit: InputEvent = null;

        constructor(details: any = undefined) {
            super();
            setupControl(this, details);
        }

        render(context: CanvasRenderingContext2D): void {

            var c = this.computed;

            // Colours based on state
            var stroke = UI.theme.colors.default.outline;
            var fill = UI.theme.colors.default.face;
            var text = UI.theme.colors.default.faceText;
            if (c.state == ControlState.hover) {
                stroke = UI.theme.colors.hover.outline;
                fill = UI.theme.colors.hover.face;
                text = UI.theme.colors.hover.faceText;
            }
            if (c.state == ControlState.down) {
                stroke = UI.theme.colors.down.outline;
                fill = UI.theme.colors.down.face;
                text = UI.theme.colors.down.faceText;
            }
            if (this.enabled === false) {
                stroke = UI.theme.colors.disabled.outline;
                fill = UI.theme.colors.disabled.face;
                text = UI.theme.colors.disabled.faceText;
            }

            // Outline
            context.lineWidth = 2;
            context.fillStyle = fill;
            context.fillRect(c.left, c.top, c.width, c.height);
            context.strokeStyle = stroke;
            context.strokeRect(c.left, c.top, c.width, c.height);

            // Caption
            context.textBaseline = 'middle';
            context.textAlign = 'center';
            context.font = UI.theme.fonts.normal;
            context.fillStyle = text;
            context.fillText(this.text, c.center, c.middle);
        }

    }

}